<template>
  <div>
    <div class="card-header">
      <h2 v-if="shopId">修改店鋪信息</h2>
      <h2 v-else>新增店鋪信息</h2>
    </div>
    <div class="card-body " >
      <Form  :model="formItem" :label-width="80">
        <FormItem label="卖家名称">
          <Select
            v-model="formItem.sellerInfo.name"
            filterable
            remote
            :loading="loading"
            @on-change="changeSellerInfo"
            :remote-method="remoteMethod">
            <Option v-for="(option, index) in sellers" :value="option.id" :key="index">{{option.name}}</Option>
          </Select>
        </FormItem>
        <FormItem label="店铺名称">
          <Input v-model="formItem.shopName"/>
        </FormItem>
        <FormItem label="经营品类">
          <Cascader :data="categories"  @on-change="addCategories" placeholder="请选择类目..." ></Cascader>
          <span class="tag" v-for="(c, index) in formItem.categories" :key="index">
            <span class="tag-name" v-text="c.label">1111</span>
            <span class="tag-close" @click="removeCategories(c.id)">
             <Icon type="close"></Icon>
            </span>
          </span>
        </FormItem>
        <FormItem label="归属地">
          <Cascader :data="categories" placeholder="请选择归属地..." ></Cascader>
        </FormItem>
        <FormItem label="详细地址">
          <Input v-model="formItem.address.road"/>
        </FormItem>
        <FormItem label="保证金">
          <InputNumber v-model="formItem.depositAmount" style="width: 100%" :min="2000"/>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="saveAction">保存</Button>
          <Button type="ghost" style="margin-left: 8px">Cancel</Button>
        </FormItem>
      </Form>
    </div>
  </div>

</template>
<script>
import {save, findById} from '../../api/shop/shopApi'
import {listByName} from '../../api/shop/accountApi'
import getCategoriesTree from '../../api/product/categoriesApi'
export default {
  data () {
    return {
      shopId: 0,
      categories: [],
      sellers: [],
      loading: false,
      formItem: {
        sellerInfo: {
          id: '',
          name: ''
        },
        shopName: '',
        categories: [],
        address: {
          road: ''
        },
        depositAmount: 2000
      }
    }
  },
  mounted () {
    this.shopId = this.$route.query.shopId
    this.initCategories()
  },
  methods: {
    initCategories () {
      getCategoriesTree(res => {
        this.categories = res
      })
    },
    loadData (shopId) {
      findById(shopId, res => {

      })
    },
    addCategories (_, selectedData) {
      let node = selectedData[selectedData.length - 1]
      let flag = true
      for (let c of this.formItem.categories) {
        if (c.id === node.id) {
          flag = false
        }
      }
      if (flag) {
        this.formItem.categories.push(node)
      }
    },
    removeCategories (id) {
      let index = -1
      for (let i = 0; i < this.formItem.categories.length; i++) {
        let c = this.formItem.categories[i]
        if (c.id === id) {
          index = i
        }
      }
      if (index > -1) {
        this.formItem.categories.splice(index, 1)
      }
    },
    saveAction () {
      let shop = Object.assign({}, this.formItem)
      shop.depositAmount = shop.depositAmount * 100 // 元转分
      shop.category = shop.categories.map(o => o.id + ':' + o.label).join(',')
      save(shop, _ => this.$Message.success('添加店鋪信息成功'), _ => this.$Message.error('添加店鋪信息失败'))
    },
    remoteMethod (query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          listByName(query, res => {
            this.sellers = res
          }, _ => {
            this.sellers = [{
              id: 1,
              name: 'test'
            }, {
              id: 2,
              name: 'demo'
            }]
          })
        }, 200)
      } else {
        this.sellers = []
      }
    },
    changeSellerInfo (id) {
      for (let seller of this.sellers) {
        if (seller.id === id) {
          this.formItem.sellerInfo = seller
        }
      }
    }
  },
  watch: {
    '$route' (to) {
      this.shopId = to.query.shopId
    }
  }
}
</script>

<style lang="less" scoped>
  .tag{
    padding: 3px;
    margin: 0 20px 0 0;
    color: #4caf50;
    border:1px solid #4caf50;
    &-name{
      border-right:1px solid #4caf50;
      padding: 3px;
    }
    &-close{
      padding: 3px;
    }
  }
</style>
